<template>
	<view
		:style="'background: url(' + imgData.messageBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title=" " :autoBack="true" bgColor="transparent" :fixed="false">
			<view class="u-nav-slot" slot="left">
				<u-tabs :list="list1" :lineColor="$u.color.color"></u-tabs>
			</view>
		</u-navbar>
		<view class="p-30" style="padding-bottom: 120rpx;">
			<template v-if="!noData">
				<view class="card p-30" style="position: relative;" @click="jumpPage(item)"
					:class="{'mt-30' : index != 0}" v-for="(item,index) in list">
					<u-badge v-if="item.is_read == 0" :isDot="true" type="error" absolute :offset="[5, 5]"></u-badge>
					<view class="flex-row justify-between align-center mb-30">
						<view class="flex-row align-center">
							<!-- <u-image lazyLoad :src="tongzhi" width="30rpx" height="30rpx" mode="widthFix"></u-image> -->
							<image :src="tongzhi" style="width: 30rpx;height:30rpx" mode="widthFix"></image>
							<view class="ml-10">
								系统消息
							</view>
						</view>
						<view class="small-size gray-color">
							{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}
						</view>
					</view>
					<view class="small-size gray-color">
						{{item.msg}}
					</view>
					<u-line color="#999999" margin="30rpx 0"></u-line>
					<view class="flex-row justify-between align-center">
						<view class="small-size gray-color">
							查看详情
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<u-empty mode="data">
				</u-empty>
			</template>
		</view>
		<page-tabbar :value="2" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		messageList,
		messageSet
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				list1: [{
					name: '消息',
				}],
				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0
			}
		},

		onShow() {
			this.init()
		},
		onLoad() {},
		methods: {
			jumpPage(e) {
				console.log(e);
				if (e.is_read == 0) {
					messageSet({
						data: {
							id: e.id
						}
					}).then(res => {
						this.$store.dispatch('getMessageCount')
					})
				}
				uni.navigateTo({
					url: e.page
				})
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit
				};
				messageList({
					params
				}).then(res => {
					console.log(res.rows.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F8FA;
	}
</style>
<style lang="scss" scoped>

</style>